import React, { memo } from 'react'
import type { ReactNode } from 'react'
import { ArtistCategoryWrapper, CategoryItem } from './style'
import classNames from 'classnames'
import { artistCategories } from '@/assets/data/local-data'
import { useAppDispatch, useAppSelector } from '@/store'
import { changeCurrentAreaAction, changeCurrentTypeAction } from '../../store/artist'

interface IProps {
  children?: ReactNode
}

const ArtistCategory: React.FC<IProps> = () => {
  const dispatch = useAppDispatch()
  const { currentArea, currentType } = useAppSelector((state) => ({
    currentArea: state.artist.currentArea,
    currentType: state.artist.currentType
  }))

  const selectArtist = (area: number, type: number, name: string) => {
    console.log('选择的类型参数','area:',area, 'type:',type, 'name:',name)
    dispatch(changeCurrentAreaAction(area))
    dispatch(changeCurrentTypeAction({ type, name }))
  }

  const renderArtist = (artists: any[], area: number) => {
    return (
      <div>
        {artists.map((item, index) => {
          const isSelect = currentArea === area && currentType.type === item.type
          return (
            <CategoryItem
              key={index}
              className={classNames({ active: isSelect })}
            >
              <span onClick={() => selectArtist(area, item.type, item.name)}>{item.name}</span>
            </CategoryItem>
          )
        })}
      </div>
    )
  }

  return (
    <div>
      <ArtistCategoryWrapper>
        {artistCategories.map((item, index) => {
          return (
            <div className="section" key={item.area}>
              <h2 className="title">{item.title}</h2>
              {renderArtist(item.artists, item.area)}
            </div>
          )
        })}
      </ArtistCategoryWrapper>
    </div>
  )
}

export default memo(ArtistCategory)